<template>
  <div class="banner">
    <el-carousel v-if="bannerList && bannerList.length>0" height="600px" :interval="3000" arrow="hover" :pause-on-hover="false">
      <el-carousel-item v-for="(v, i) in bannerList" :key="i">
        <a class="banner-link">
          <img :src="v.url" alt="" class="banner-image">
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Banner'
})
</script>

<script setup>
import {onMounted, ref} from 'vue'
import {ApiImgs} from "@/api/home.js";

const bannerList = ref([])
const isMobile = ref(window.innerWidth <= 768)

// 监听窗口大小变化
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth <= 768
})
console.log(isMobile.value,'isMobile.value');

onMounted(() => {
  ApiImgs({
    type: 0,
    pointType:isMobile.value?'0':'1'
  }).then(res => {
    console.log(isMobile.value,'isMobile.value');

    bannerList.value = res.rows || []
  })
})
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto var(--spacing-lg);
  overflow: hidden;
  position: relative;

  .banner-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

:deep(.el-carousel__container) {
  height: 600px;
}

:deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.3);
  top: 25% !important;

  &:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

:deep(.el-carousel__indicators) {
  bottom: 20px;

  .el-carousel__button {
    width: 30px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.7);
  }
}
</style>
